<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用canvas绘制平面图</title>
</head>
<body>
    <canvas id="oCanvas" width="600" height="800" style="border:1px solid black"></canvas>
</body>


<script>
    // 绘制竖排文本的方法
    CanvasRenderingContext2D.prototype.wrapText = function (text, x, y, maxWidth, lineHeight) {
    if (typeof text != 'string' || typeof x != 'number' || typeof y != 'number') {
        return;
    }
    
    var context = this;
    var canvas = context.canvas;
    
    if (typeof maxWidth == 'undefined') {
        maxWidth = (canvas && canvas.width) || 300;
    }
    if (typeof lineHeight == 'undefined') {
        lineHeight = (canvas && parseInt(window.getComputedStyle(canvas).lineHeight)) || parseInt(window.getComputedStyle(document.body).lineHeight);
    }
    
    // 字符分隔为数组
    var arrText = text.split('');
    var line = '';
    
    for (var n = 0; n < arrText.length; n++) {
        var testLine = line + arrText[n];
        var metrics = context.measureText(testLine);
        var testWidth = metrics.width;
        if (testWidth > maxWidth && n > 0) {
            context.fillText(line, x, y);
            line = arrText[n];
            y += lineHeight;
        } else {
            line = testLine;
        }
    }
    context.fillText(line, x, y);
    };
    
    var p1={
        x:0,
        y:350
    };
    var p2={
        x:15,
        y:350
    };
    var p3={
        x:100,
        y:350
    };
    var p4={
        x:100,
        y:365
    };
    var p5={
        x:100,
        y:515
    };
    var p6={
        x:115,
        y:515
    };
    var p7={
        x:0,
        y:65
    };
    var p8={
        x:15,
        y:65
    };
    var p9={
        x:100,
        y:65
    };
    var p10={
        x:100,
        y:50
    };
    var p11={
        x:100,
        y:0
    };
    var p12={
        x:115,
        y:0
    };
    var p13={
        x:500,
        y:0
    };
    var p14={
        x:500,
        y:15
    };
    var p15={
        x:500,
        y:715
    };
    var p16={
        x:485,
        y:715
    };
    var p17={
        x:385,
        y:715
    };
    var p18={
        x:385,
        y:700
    };
    var p19={
        x:400,
        y:220
    };
    var p20={
        x:400,
        y:215
    };
    var p21={
        x:400,
        y:80
    };
    var p22={
        x:395,
        y:80
    };
    var p23={
        x:370,
        y:80
    };
    var p24={
        x:370,
        y:85
    };
    var p25={
        x:370,
        y:220
    };
    var p26={
        x:375,
        y:220
    };
    
    // 获取canvas对象
    var canvas = document.getElementById("oCanvas");
    // 通过canvas对象获取2d对象
    var ctx = canvas.getContext('2d');

    
    ctx.translate(50,50);
    // 新建一条路径
    ctx.beginPath();
    
    ctx.strokeStyle="black";
    ctx.moveTo(0,80);
    ctx.lineTo(0,335);
    ctx.arcTo(p1.x,p1.y,p2.x,p2.y,15);
    
    ctx.lineTo(85,350);
    ctx.arcTo(p3.x,p3.y,p4.x,p4.y,15);

    ctx.lineTo(100,500);
    ctx.arcTo(p5.x,p5.y,p6.x,p6.y,15);

    ctx.lineTo(280,515);

    

    // 描边
    ctx.stroke();


    ctx.beginPath();
    ctx.moveTo(0,80);
    ctx.arcTo(p7.x,p7.y,p8.x,p8.y,15);

    ctx.lineTo(85,65);
    ctx.arcTo(p9.x,p9.y,p10.x,p10.y,15);

    ctx.lineTo(100,15);
    ctx.arcTo(p11.x,p11.y,p12.x,p12.y,15);

    ctx.lineTo(485,0);
    ctx.arcTo(p13.x,p13.y,p14.x,p14.y,15);

    ctx.lineTo(500,700);
    ctx.arcTo(p15.x,p15.y,p16.x,p16.y,15);

    ctx.lineTo(400,715);
    ctx.arcTo(p17.x,p17.y,p18.x,p18.y,15);

    ctx.lineTo(385,220);

    //文具柜
    ctx.lineTo(395,220);
    ctx.arcTo(p19.x,p19.y,p20.x,p20.y,5);

    ctx.lineTo(400,85);
    ctx.arcTo(p21.x,p21.y,p22.x,p22.y,5);

    ctx.lineTo(375,80);
    ctx.arcTo(p23.x,p23.y,p24.x,p24.y,5);

    ctx.lineTo(370,215);
    ctx.arcTo(p25.x,p25.y,p26.x,p26.y,5);

    ctx.lineTo(385,220);

    ctx.stroke();

    //线0
    ctx.moveTo(385,240);
    ctx.lineTo(400,240);
    ctx.stroke();
    //线1
    ctx.moveTo(385,315);
    ctx.lineTo(500,315);
    ctx.stroke();
    // 线2
    ctx.moveTo(385,515);
    ctx.lineTo(500,515);
    ctx.stroke();

    //储物柜
    var txt = "储物柜";
    ctx.beginPath();
    // 水平对齐
    ctx.textAlign="left";
    // 垂直对齐
    ctx.textBaseline="top";
    ctx.font="25px 黑体";
    ctx.fillStyle="black";
    // canvas绘制文本
    //          文本   起始的x,y 最大宽度，行高
    // ctx.wrapText(txt, 225, 20,20,40);
    ctx.fillText(txt,225,20);

    //景观休息区
    var txt1 = "景观休息区";
    ctx.wrapText(txt1,30,115,20,40);

    //茶水间
    var txt2 = "茶水间";
    ctx.fillText(txt2,140,450);

    // 通往电脑屋
    var txt3 = "通往电脑屋↓";
    ctx.wrapText(txt3,320,450,20,40);

    //前台（线0）
    var txt4 = "前台";
    ctx.fillText(txt4,400,227);

    // 文具柜
    var txt5 = "文具柜";
    ctx.wrapText(txt5,372,110,20,30);
    
    //大门
    var txt6 = "大门";
    ctx.wrapText(txt6,460,145,20,30);


    // 填充矩形（大门）
    ctx.beginPath();
    //起始x,y  长 高
    ctx.fillRect(495,95,10,150);

    // 填充矩形（景观）
    ctx.beginPath();
    //起始x,y  长 高
    ctx.fillRect(-5,100,10,215);

    // 两个小门
    ctx.beginPath();
    //起始x,y  长 高
    ctx.fillRect(380,430,10,60);
    ctx.fillRect(380,550,10,60);

    // 桌子
    ctx.fillRect(200,80,50,120);
    ctx.fillRect(200,240,50,120);

    // 凳子1
    ctx.beginPath();
    ctx.arc(180,100,20,Math.PI/2,Math.PI*3/2,false);
    ctx.lineTo(200,80);
    ctx.lineTo(200,120);
    ctx.lineTo(180,120);
    ctx.stroke();

    // 凳子2
    ctx.beginPath();
    ctx.moveTo(180,160);
    ctx.arc(180,140,20,Math.PI/2,Math.PI*3/2,false);
    ctx.lineTo(200,120);
    ctx.lineTo(200,160);
    ctx.lineTo(180,160);
    ctx.stroke();

    // 凳子3
    ctx.beginPath();
    ctx.moveTo(180,200);
    ctx.arc(180,180,20,Math.PI/2,Math.PI*3/2,false);
    ctx.lineTo(200,160);
    ctx.lineTo(200,200);
    ctx.lineTo(180,200);
    ctx.stroke();

    // 凳子4
    ctx.beginPath();
    ctx.moveTo(270,120);
    ctx.arc(270,100,20,Math.PI/2,Math.PI*3/2,true);
    ctx.lineTo(250,80);
    ctx.lineTo(250,120);
    ctx.lineTo(270,120);
    ctx.stroke();

    // 凳子5
    ctx.beginPath();
    ctx.moveTo(270,160);
    ctx.arc(270,140,20,Math.PI/2,Math.PI*3/2,true);
    ctx.lineTo(250,120);
    ctx.lineTo(250,160);
    ctx.lineTo(270,160);
    ctx.stroke();

    // 凳子6
    ctx.beginPath();
    ctx.moveTo(270,200);
    ctx.arc(270,180,20,Math.PI/2,Math.PI*3/2,true);
    ctx.lineTo(250,160);
    ctx.lineTo(250,200);
    ctx.lineTo(270,200);
    ctx.stroke();


    // 凳子7 y+160
    ctx.beginPath();
    ctx.arc(180,260,20,Math.PI/2,Math.PI*3/2,false);
    ctx.lineTo(200,240);
    ctx.lineTo(200,280);
    ctx.lineTo(180,280);
    ctx.stroke();

    // 凳子8
    ctx.beginPath();
    ctx.moveTo(180,320);
    ctx.arc(180,300,20,Math.PI/2,Math.PI*3/2,false);
    ctx.lineTo(200,280);
    ctx.lineTo(200,320);
    ctx.lineTo(180,320);
    ctx.stroke();

    // 凳子9
    ctx.beginPath();
    ctx.moveTo(180,360);
    ctx.arc(180,340,20,Math.PI/2,Math.PI*3/2,false);
    ctx.lineTo(200,320);
    ctx.lineTo(200,360);
    ctx.lineTo(180,360);
    ctx.stroke();

    // 凳子10
    ctx.beginPath();
    ctx.moveTo(270,280);
    ctx.arc(270,260,20,Math.PI/2,Math.PI*3/2,true);
    ctx.lineTo(250,240);
    ctx.lineTo(250,280);
    ctx.lineTo(270,280);
    ctx.stroke();

    // 凳子11
    ctx.beginPath();
    ctx.moveTo(270,320);
    ctx.arc(270,300,20,Math.PI/2,Math.PI*3/2,true);
    ctx.lineTo(250,280);
    ctx.lineTo(250,320);
    ctx.lineTo(270,320);
    ctx.stroke();

    // 凳子12
    ctx.beginPath();
    ctx.moveTo(270,360);
    ctx.arc(270,340,20,Math.PI/2,Math.PI*3/2,true);
    ctx.lineTo(250,320);
    ctx.lineTo(250,360);
    ctx.lineTo(270,360);
    ctx.stroke();
    
</script>
</html>